<!--
 * @Description: 
 * @Author: wuyc
 * @Date: 2024-11-05 15:37:58
 * @LastEditors: zwx
 * @LastEditTime: 2024-11-06 15:44:01
-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
<style>
  /* 设置页面基本样式 */
  body {
    font-family: Arial, sans-serif;
    background-image: url('./img/cc.png'); 
    background-size: cover; /* 覆盖整个页面 */
    background-position: center; /* 背景图居中显示 */
    background-attachment: fixed; /* 背景图固定，不随页面滚动 */
    margin: 0;
    padding: 20px;
  }
    /* 注册容器样式 */
   .register-container {
    /* 设置元素的最大宽度为400像素  */
    max-width: 400px;
    /* 设置元素的外边距。50px是上下外边距，auto是左右外边距 */
    margin: 50px auto;
    /* 设置元素的内边距为20像素 */
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.8); /* 半透明背景 */
    border-radius: 8px;
    /* 以及圆角边框，每个角的圆角半径为8像素 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); 
  }
  /* 标题样式 */
  h2 {
    text-align: center;
    color: #333;
  }
  /* 表单组样式 */
  .form-group {
    /* 设置元素底部的外边距为15像素 */
    margin-bottom: 15px;
    /* 将元素的显示类型设置为弹性盒子（Flexbox） */
    display: flex;
    align-items: center; /* 垂直居中对齐 */
    justify-content: space-between; /* 两端对齐 */
  }
  /* 标签样式 */
  .form-group label {
    flex: 0.4; /* 标签占据一定比例空间 */
    text-align: right; /* 标签文本右对齐 */
    margin-right: 10px; /* 标签和输入框之间的间距 */
    white-space: nowrap; /* 防止标签换行 */
  }
  /* 输入框样式 */
  .form-group input {
    flex: 2; /* 输入框占据剩余空间 */
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
  }
  /* 提交按钮样式 */
  .form-group input[type="submit"] {
    background-color: #5cb85c;
    color: white;
    border: none;
    cursor: pointer;
  }
  /* 提交按钮鼠标悬停样式 */
  .form-group input[type="submit"]:hover {
    background-color: #4cae4c;
  }
  /* 性别单选按钮样式 */
  .gender-radio {
    display: flex;
    align-items: center;
    justify-content:flex-end;
  }
  .gender-radio label {
    margin-right: 10px; /* 单选按钮之间的间距 */
  }
  /* 验证码组样式 */
  .captcha-group {
    display: flex;
    align-items: center;
  }
  .captcha-group input {
    margin-right: 10px;
  }
  /* 新增验证码图片样式 */
  .captcha-img {
   width: 100px; /* 设置图片宽度 */
   height: 50px; /* 设置图片高度 */
   }
</style>
</head>
<body>
<!-- 注册表单容器 -->
<div class="register-container">
  <h2>新用户注册</h2>
  <!-- 用户注册表单 -->
  <form action="#" method="post">

    <!-- 用户名输入组 -->
    <div class="form-group">
      <label for="username">用户名</label>
      <input type="text" id="username" name="username" placeholder="请输入账号">
    </div>

    <!-- 密码输入组 -->
    <div class="form-group">
      <label for="password">密码</label>
      <input type="password" id="password" name="password" placeholder="请输入密码">
    </div>
    
    <!-- Email输入组 -->
    <div class="form-group">
      <label for="email">Email</label>
      <input type="email" id="email" name="email" placeholder="请输入Email">
    </div>
    <!-- 姓名输入组 -->
    <div class="form-group">
      <label for="name">姓名</label>
      <input type="text" id="name" name="name" placeholder="请输入真实姓名">
    </div>
    <!-- 手机号输入组 -->
    <div class="form-group">
      <label for="phone">手机号</label>
      <input type="tel" id="phone" name="phone" placeholder="请输入您的手机号">
    </div>
    <!-- 性别选择组 -->
    <div class="gender-radio">
      <label for="gender">性别</label>
      <label><input type="radio" name="gender" value="male"> 男</label>
      <label><input type="radio" name="gender" value="female"> 女</label>
      </div>

    <div class="form-group">
      <label for="birthdate">出生日期</label>
      <input type="date" id="birthdate" name="birthdate">
    </div>
    <div class="form-group">
      <label for="captcha">验证码</label>
      <input type="text" id="captcha" name="captcha">
      <img src="img/img.png" alt="验证码" class="captcha-img" /> 
    </div>
    <div class="form-group">
      <input type="submit" value="注册">     
    </div>
  </form>
</div>
</body>
</html>